<template>
    <div class="trend">
        <div class="text" :style="{ color: textColor }">
            <slot v-if="slots.defaulet"></slot>
            <div v-else>
                {{ text }}
            </div>
        </div>
        <div class="icon">
            <!-- <el-icon-arrowup :style="{ color: !reverseColor ? upIconColor : '#52c41a' }" v-if="type == 'up'">
            </el-icon-arrowup>
            <el-icon-arrowdown :style="{ color: !reverseColor ? downIconColor : '#f5222d' }" v-else>
            </el-icon-arrowdown> -->
            <component :is='`el-icon-${toLine(upIcon)}`' :style="{ color: !reverseColor ? upIconColor : ' #52c41a' }"
                v-if="type == 'up'"></component>
            <component :is='`el-icon-${toLine(downIcon)}`' :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
                v-else></component>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useSlots, computed } from 'vue'
import { toLine } from '../../../utils'

let props = defineProps({
    // 标记当前趋势是上升(up)还是下降(down)
    type: {
        type: String,
        default: 'up'
    },
    // 趋势显示的文字
    // 1. 父组件传递过来的数据
    // 2. 插槽
    text: {
        type: String,
        defaulet: '文字'
    },
    // 上升趋势显示的图标
    upIcon: {
        type: String,
        default: 'ArrowUp'
    },
    // 下降趋势显示的图标
    downIcon: {
        type: String,
        default: 'ArrowDown'
    },
    // 颜色翻转只在默认的颜色下生效 如果使用了自定义颜色 这个属性就不生效
    reverseColor: {
        type: Boolean,
        default: false
    },
    // 上升趋势图标颜色
    upIconColor: {
        type: String,
        default: '#f5222d'
    },
    // 上升趋势文字的颜色
    upTextColor: {
        type: String,
        default: 'rgb(0, 0, 0)'
    },
    // 下降趋势图标颜色
    downIconColor: {
        type: String,
        default: '#52c41a'
    },
    // 下降趋势文字的颜色
    downTextColor: {
        type: String,
        default: 'rgb(0, 0, 0)'
    },
})
// 获取插槽内容
let slots = useSlots()

// 文字颜色
let textColor = computed(() => {
    return props.type === 'up' ? props.upTextColor : props.downTextColor
})
</script>

<style lang="scss" scoped>
.trend {
    display: flex;
    justify-content: center;
    align-items: center;

    .text {
        font-size: 12px;
        margin-right: 4px;

        svg {
            width: 0.8em;
            height: 0.8em;
        }
    }
}

svg {
  width: 1em;
  height: 1em;
}
</style>